import React, { useState, useEffect } from 'react';
import { goBack, componentsMap } from '@/utils/util';
import { Form, Button, Space } from 'antd';
import UploadList from '@/components/UploadList';
import API from '@/api/xjindex.js';

const workDeploymentCreate = () => {
  const [form] = Form.useForm();
  const [JJCD, setJJCD] = useState(null);
  const [receiverList, setreceiverList] = useState([]);
  const [cflge, setCflge] = useState(null);
  const [JSDW] = useState([]);
  const _JJCD = {};
  const JJCDList = [];
  const TableList = [
    {
      label: '工作名称',
      name: 'workName',
      type: 'input',
      rules: [
        {
          required: true,
          message: '请输入工作名称',
        },
      ],
    },
    {
      label: '紧急程度',
      name: 'emergency',
      type: 'select',
      otherProps: {
        options: JJCD,
      },
      rules: [
        {
          required: true,
          message: '请选择紧急程度',
        },
      ],
    },
    {
      label: '接收单位',
      name: 'receiverId',
      type: 'checkbox',
      otherProps: {
        options: receiverList,
      },
      isremark: true,
      rules: [
        {
          required: true,
          message: '请选择接收单位',
        },
      ],
    },
    {
      label: '工作说明',
      name: 'adress',
      type: 'input',
      isremark: true,
    },
  ];
  const uploadOptions = {
    fileTypes: [
      'application/doc',
      'application/pdf',
      'application/msword',
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      'image/jpg',
      'image/jpeg',
      'image/png',
    ],
    maxSize: 50,
    maxNum: 3,
    accept: [
      '.doc,.docx.,.pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,.jpg,.jpeg,.png',
    ],
    acceptMessage: 'jpg/word/pdf',
  };
  function initList() {
    API.dictItemList().then((res) => {
      if (res) {
        res.t.map((item) => {
          if (item.dictCode == 'JJCD') {
            _JJCD[item.dictItemType] = item.dictItemName; //表格里返回数据值的修改
            JJCDList.push({
              //下拉框
              label: item.dictItemName,
              value: item.dictItemType,
            });
          }
        });
        setJJCD(JJCDList);
      }
    });
    API.showServiceProviderList().then((res) => {
      if (res) {
        res.t.map((item) => {
          JSDW[item.id] = item.name;
        });
        setreceiverList(
          res.t.map((item) => ({ label: item.name, value: item.id })),
        );
      }
    });
  }
  function baocun(r) {
    setCflge(r);
  }
  function submitFn(values) {
    values.flag = cflge;
    values.receiverName = values.receiverId.map((item) => JSDW[item]);
    values.receiverName = values.receiverName.join(',');
    values.receiverId = values.receiverId.join(',');
    API.addWork(values).then((res) => {
      if (res) {
        goBack();
      }
    });
  }
  useEffect(() => {
    initList();
  }, []);
  return (
    <>
      <div className="main-x">
        <Form form={form} onFinish={submitFn}>
          <div className="base-title">工作部署信息</div>
          <div className="bgf">
            <div className="ant-form-inline form-x max-x">
              {TableList.map((item) => {
                return (
                  <Form.Item
                    key={item.name}
                    label={item.label}
                    name={item.name}
                    className={item.isremark ? 'block' : ''}
                    rules={item.rules}
                  >
                    {componentsMap(item.type, item.otherProps)}
                  </Form.Item>
                );
              })}
            </div>
          </div>
          <div className="base-title mt20">附件信息</div>
          <div className="form-x bgf" style={{ paddingBottom: '16px' }}>
            <Form.Item
              label="附件信息"
              extra="支持jpg/word/pdf格式,单个大小在50M以内,支持多个上传，最多上传3个附件"
              name="workFile"
              className="block"
              rules={[{ required: true, message: '请上传文件' }]}
            >
              <UploadList
                uploadUrl="/work/fileUpload"
                downloadUrl="/work/download"
                options={uploadOptions}
              ></UploadList>
            </Form.Item>
          </div>
          <div className="footer-x">
            <Space className="btns" size={18}>
              <Button
                type="primary"
                htmlType="submit"
                onClick={baocun.bind(null, 1)}
              >
                保存
              </Button>
              <Button
                type="primary"
                htmlType="submit"
                onClick={baocun.bind(null, 2)}
              >
                提交
              </Button>
              <Button type="primary" className="cancel-btn" onClick={goBack}>
                返回
              </Button>
            </Space>
          </div>
        </Form>
      </div>
    </>
  );
};

export default workDeploymentCreate;
